<template>
  <div style="padding:10px">
      <div style="margin:10px">
          <el-button type="primary" @click="add">新增</el-button>
          
      </div>
  
     <div style="margin:10px">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
          prop="id"
          label="序号"
          
          >
          </el-table-column>
          <el-table-column
          prop="title"
          label="公告标题"
          
          >
          </el-table-column>
          <el-table-column
          prop="publishDate"
          label="发布日期"
  
          >
          </el-table-column>
  
          <el-table-column
          prop="beginDate"
          label="生效日期"
          
          >
          </el-table-column>
  
          <el-table-column
          prop="endDate"
          label="失效日期"
          >
          </el-table-column>
  
          <el-table-column
          prop="status"
          label="状态"
          >
          </el-table-column>

          <el-table-column
          prop="type"
          label="公告类型"
          >
          </el-table-column>

          <el-table-column
          prop="platformType"
          label="平台类型"
          >
          </el-table-column>

          <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="button" size="mini">编辑</el-button>
              
              <el-popconfirm @confirm="handleDelete(scope.row)" title="这是一段内容确定删除吗？">
          
                <el-button  slot="reference" type="danger" size="mini">删除</el-button>
      
              </el-popconfirm>  
          </template>
          </el-table-column>
      </el-table>
     </div>
      <div class="block" style="margin:10px 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="total,  prev, pager, next, jumper"
          :total=this.total>
        </el-pagination>
      </div>
      
      <!-- 新增表 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
        <el-form :model="form" label-width="120px" :rules="rules">
          <el-form-item label="公告类型">
            <el-select v-model="form.type" placeholder="请选择公告类型" style="width:80%">
              <el-option label="普通公告" value="普通公告"></el-option>
              <el-option label="紧急公告" value="紧急公告"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="平台类型">
            <el-radio-group v-model="form.platformType">
              <el-radio label="运营平台"></el-radio>
              <el-radio label="经销商平台"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="form.title" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="生效日期" prop="beginDate">
            <el-date-picker
              v-model="form.beginDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:80%"
              placeholder="选择日期时间"
              :picker-options="pickerStartOptions"
              >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="失效日期" prop="endDate">
            <el-date-picker
              v-model="form.endDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width:80%"
              placeholder="选择日期时间"
              :picker-options="pickerEndOptions"
              >
            </el-date-picker>
          </el-form-item>
          
          <el-form-item label="公告图片" prop="img">
            <el-upload
              ref="upload"
              action="http://localhost:8080/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handleAvatarSuccess"
              :limit="1"
              list-type="picture"
              :on-exceed="handleExceed"
              >
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
          </el-form-item>

          <el-form-item label="公告内容">
            <el-input type="textarea" v-model="form.content" style="width:80%"></el-input>
          </el-form-item>
  
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>

    </div>
 
  </template>
  
  <script>
  
    export default {
      data() {
      
        return {
          dialogVisible:false,
          search:'',
          currentPage:1,
          pageSize:10,
          total:10,
          page:1,
          gettime: "",
          form:{
           img:''
          },
          tableData: [
          ],
          rules:{
            title:[
              {max:50,message:'长度最长50个字符',trigger:'blur'}
            ]
          },
              // 选择的生效日期时间
          pickerStartOptions: {
              disabledDate: (time) => {
                  if (this.form.endDate) {
                      return time.getTime() > new Date(this.form.endDate).getTime();
                  }          
              }
          },
          // 选择的失效日期时间
          pickerEndOptions: {
              disabledDate: (time) => {
                  if (this.form.beginDate) {
                      return time.getTime() < new Date(this.form.beginDate).getTime()
                  }             
              }
          },

        }
      },
      mounted() {
        this.load()
        this.currentTime();
      },
      methods:{
          
          load(){
            this.$Ajax.get("getNoticeInfo",{
              params:{
                page:this.currentPage,
              }
            })
            .then(res =>{
            console.log(res),
            this.total = res.data.total
            this.tableData = res.data.rows
            })
          },
          add(){
            this.dialogVisible=true
            console.log(this.gettime);
            this.clearform
            this.form={publishDate:this.gettime }
            this.$refs['upload'].clearFiles()
          },
          clearform(){
            this.form = { }
            this.fileList = []
          },
          save(){
            if(this.form.id){//更新
              this.$Ajax.post("modifyNoticeInfoById",this.form).then((result) => {
                console.log("result");
                if(result.data.flag == true){
                  this.$message({
                    type:"success",
                    message:result.data.message
                  })
                }else{
                  this.$message({
                    type:"error",
                    message:result.data.message
                  })
                }
                this.load()//刷新表格数据
                this.dialogVisible = false //关闭弹窗
              })
            }else{ //新增
              this.$Ajax.post("insertNoticeInfo",this.form).then((result) => {
                if(result.data.flag == true){
                  this.$message({
                    type:"success",
                    message:result.data.message
                  })
                }else{
                  this.$message({
                    type:"error",
                    message:result.data.message
                  })
                }
                this.load()//刷新表格数据
                this.dialogVisible = false //关闭弹窗
              })
            }
          },
          
          
          handleEdit(row){
              this.form = JSON.parse(JSON.stringify(row))
              this.dialogVisible = true
              this.$nextTick(() => {
                this.$refs['upload'].clearFiles()
              })
              
          },
          handleDelete(row){
            console.log(row);
            this.$Ajax.post("deleteNoticeById",row).then((result) => {
                if(result.data.flag == true){
                  this.$message({
                    type:"success",
                    message:result.data.message
                  })
                }else{
                  this.$message({
                    type:"error",
                    message:result.data.message
                  })
                }
                this.load()//刷新表格数据
                this.dialogVisible = false //关闭弹窗
              })
          },
          
          handleCurrentChange(pagenum) {
            
            this.currentPage = pagenum
            console.log(`当前页: ${pagenum}`);
            this.load()
          },
          
          // 获取当前时间
          getTime() {
          var _this = this;
            let yy = new Date().getFullYear();
            var mm =
              new Date().getMonth() > 9
                ? new Date().getMonth() + 1
                : new Date().getMonth() == 9
                ? new Date().getMonth() + 1
                : '0' + (new Date().getMonth() + 1);
            var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
            let hh = new Date().getHours();
            let mf =
              new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
            let ss =
              new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
            _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
          },
          currentTime() {
            setInterval(this.getTime, 1000);
          },
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            window.open(file.response.url)
            console.log(file);
          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
          handleAvatarSuccess(res, file) {
            this.form.img = res
          }

      },
    }
  </script>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>